<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card>
        <div class="sort-title">
          <el-button
            type="primary"
            size="mini"
            @click="addSort"
          >添加分类</el-button>
          <el-input
            v-model="searchVal"
            placeholder="请输入关键字"
            class="input-with-select"
          >
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="InputSearch"
            />
          </el-input>
        </div>
        <el-divider />
        <div class="sort-content">
          <el-table border :data="sortList" style="width: 100%">
            <el-table-column align="center" label="图片">
              <template #default="{ row }">
                <img
                  v-fixImg="require('@/assets/common/head.jpg')"
                  style="width: 100px; height: 100px"
                  :src="row.image"
                >
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              prop="title"
              label="标题"
              width="180"
            />
            <el-table-column align="center" prop="desc" label="介绍" />
            <el-table-column align="center" label="操作">
              <template #default="{row}">
                <el-button type="primary" size="mini" @click="editSort(row.id)">编辑</el-button>
                <el-button type="danger" size="mini" @click="delSort(row.id)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页 -->
          <el-pagination
            :current-page="currentPage"
            style="text-align: center"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="sortCurrent._limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="sizeChange"
            @current-change="currentChange"
          />
          <!-- 弹窗 -->
          <el-dialog
            :title="sortForm.id?'编辑分类':'添加分类'"
            :visible="isShowDialog"
            @close="btnCanCel"
          >
            <el-form ref="sortForm" :rules="rules" :model="sortForm">
              <el-form-item label="标题" prop="title" label-width="60px">
                <el-input v-model="sortForm.title" autocomplete="off" />
              </el-form-item>
              <el-form-item label="描述" prop="desc" label-width="60px">
                <el-input v-model="sortForm.desc" autocomplete="off" />
              </el-form-item>
              <el-form-item label="封面" label-width="60px">
                <!-- 图片组件 -->
                <imageUpload ref="Photo" />
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="btnCanCel">取 消</el-button>
              <el-button type="primary" @click="btnOk">确 定</el-button>
            </div>
          </el-dialog>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import { getSortList, getTotal, addSort, editSort, getSort, delSort } from '@/api/sort'
export default {
  data() {
    return {
      sortList: [],
      searchVal: '',
      total: 0,
      currentPage: 1,
      sortCurrent: {
        _limit: 5,
        _start: 0,
        title_contains: ''
      },
      isShowDialog: false,
      sortForm: {
        id: '',
        title: '',
        desc: '',
        image: ''
      },
      rules: {
        title: [{ required: true, message: '该项不能为空', trigger: 'blur' }],
        desc: [{ required: true, message: '该项不能为空', trigger: 'blur' }]
      }
    }
  },

  created() {
    this.sortData()
  },
  methods: {
    sizeChange(val) {
      this.sortCurrent._limit = val
      this.sortData()
    },
    currentChange(val) {
      this.sortCurrent._start = (val - 1) * this.sortCurrent._limit
      this.currentPage = val
      this.sortData()
    },
    async sortData() {
      this.sortList = await getSortList(this.sortCurrent)
      this.total = await getTotal({ title_contains: this.sortCurrent.title_contains })
    },
    InputSearch() {
      this.sortCurrent.title_contains = this.searchVal
      this.sortCurrent._start = 0
      this.sortData()
    },
    addSort() {
      this.isShowDialog = true
    },
    async editSort(id) {
      this.isShowDialog = true
      console.log(id)
      const { desc, title, image } = await getSort(id)
      this.sortForm = {
        id,
        title,
        desc,
        image: this.$refs.Photo.fileList = [{ url: image }]
      }
    },
    async delSort(id) {
      try {
        await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        await delSort(id)
        this.$message.success({
          message: '删除成功!',
          center: true
        })
        // 当前页没数据时，页数后退1
        if (this.sortList.length === 1) {
          this.currentPage--
          this.sortCurrent._start = (this.currentPage - 1) * this.sortCurrent._limit
        }
        this.sortData()
      } catch (error) {
        this.$message.info({
          message: '已取消删除!',
          center: true
        })
      }
    },
    async btnOk() {
      try {
        await this.$refs.sortForm.validate()
        if (!this.$refs.Photo.fileList[0]) {
          this.$message.warning({
            message: '封面图片不能为空',
            center: true
          })
          return
        }
        if (this.$refs.Photo.fileList[0].status !== 'success') {
          this.$message.warning({
            message: '请等待图片上传完成',
            center: true
          })
          return
        }
        this.sortForm.image = this.$refs.Photo.fileList[0].url
        if (this.sortForm.id) {
          // 编辑
          await editSort(this.sortForm)
          this.$message.success({
            message: '编辑分类成功',
            center: true
          })
        } else {
          // 新增
          await addSort(this.sortForm)
          this.currentPage = 1
          this.sortCurrent._start = 0
          this.$message.success({
            message: '新增分类成功',
            center: true
          })
        }

        this.sortData()
        this.isShowDialog = false
      } catch (error) {
        return error
      }
    },
    btnCanCel() {
      this.sortForm = {
        title: '',
        desc: '',
        image: ''
      }
      this.$refs.Photo.fileList = []
      this.$refs.sortForm.resetFields()
      this.isShowDialog = false
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-container {
  .app-container {
    .sort-title {
      display: flex;
      justify-content: space-between;
      ::v-deep .el-input-group {
        width: 30%;
      }
    }
  }
}
</style>
